<template>
  <div class="points-history">
    <div class="history-header">
      <h3 class="history-title">积分历史记录</h3>
      <el-button type="primary" text @click="refreshData">
        <el-icon><Refresh /></el-icon> 刷新
      </el-button>
    </div>

    <div v-loading="loading">
      <div v-if="history.length === 0" class="empty-history">
        暂无积分记录
      </div>
      
      <el-timeline v-else>
        <el-timeline-item
          v-for="(item, index) in history"
          :key="index"
          :timestamp="item.date"
          :type="getItemType(item.points)"
        >
          <div class="timeline-content">
            <div class="timeline-text">{{ item.description }}</div>
            <div class="timeline-points" :class="item.points > 0 ? 'points-increase' : 'points-decrease'">
              {{ item.points > 0 ? '+' : '' }}{{ item.points }}
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'
import request from '../utils/request'

const props = defineProps({
  userId: {
    type: Number,
    required: true
  }
})

const loading = ref(false)
const history = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

onMounted(() => {
  fetchPointsHistory()
})

async function fetchPointsHistory() {
  loading.value = true
  try {
    // 这里应该调用API获取积分历史
    // 由于API文档中没有直接的积分历史API，这里模拟数据
    // 实际开发时应替换为真实API
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 模拟数据
    history.value = [
      { date: '2023-05-20 14:30', description: '完成题目: 两数之和', points: 10 },
      { date: '2023-05-18 16:45', description: '每日签到', points: 5 },
      { date: '2023-05-15 09:20', description: '参与讨论', points: 3 },
      { date: '2023-05-10 11:35', description: '完成题目: 打家劫舍', points: 15 },
      { date: '2023-05-05 10:25', description: '每日签到', points: 5 },
    ]
    
    total.value = 20 // 模拟总记录数
  } catch (error: any) {
    console.error('获取积分历史失败:', error)
    ElMessage.error(error.message || '获取积分历史失败')
  } finally {
    loading.value = false
  }
}

function refreshData() {
  fetchPointsHistory()
}

function handleSizeChange(val: number) {
  pageSize.value = val
  fetchPointsHistory()
}

function handleCurrentChange(val: number) {
  currentPage.value = val
  fetchPointsHistory()
}

function getItemType(points: number) {
  if (points > 0) return 'success'
  if (points < 0) return 'danger'
  return 'info'
}
</script>

<style scoped>
.points-history {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.history-title {
  font-size: 18px;
  font-weight: 500;
  margin: 0;
}

.timeline-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timeline-text {
  flex-grow: 1;
}

.timeline-points {
  font-weight: bold;
  margin-left: 20px;
}

.points-increase {
  color: #67c23a;
}

.points-decrease {
  color: #f56c6c;
}

.empty-history {
  text-align: center;
  color: #909399;
  padding: 40px 0;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 